<template>
  <a-modal
    class="common-modal"
    :title="title"
    :footer="null"
    :width="550"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :maskClosable="false"
    style="top: 5%"
  >
    <a-spin :spinning="confirmLoading">
      <a-form
        :model="formState"
        @validateFields="handleOk"
        ref="formRef"
        layout="vertical"
        class="common-modal-content"
      >
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :label="$t('deviceManage.bridgeNo')"
              name="code"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-model:value.trim="formState.code"
                disabled
                :placeholder="$t('deviceManage.autoGenerate')"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              :label="$t('deviceManage.bridgeType')"
              name="bridgeType"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :rules="[
                {
                  required: true,
                  message: $t('other.pleaseSelectBridgeType'),
                },
              ]"
            >
              <a-select
                v-model:value="formState.bridgeType"
                allowClear
                :options="selectOptions.bridgeTypeArray"
                :placeholder="$t('common.pleaseSelect')"
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              :label="$t('deviceManage.aPoint')"
              name="alineStationId"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :rules="[
                { required: true, message: $t('other.pleaseSelectAPoint') },
              ]"
            >
              <a-cascader
                v-model:value="formState.alineStationId"
                :options="selectOptions.threeSelectArray"
                :placeholder="$t('common.pleaseSelect')"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              :label="$t('deviceManage.bPoint')"
              name="blineStationId"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :rules="[
                { required: true, message: $t('other.pleaseSelectBPoint') },
              ]"
            >
              <a-cascader
                v-model:value="formState.blineStationId"
                :options="selectOptions.threeSelectArray"
                :placeholder="$t('common.pleaseSelect')"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              :label="$t('common.direction')"
              name="direction"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :rules="[
                {
                  required: true,
                  message: $t('other.pleaseSelectDirection'),
                },
              ]"
            >
              <a-select
                v-model:value="formState.direction"
                allowClear
                :options="selectOptions.directionArray"
                :placeholder="$t('common.pleaseSelect')"
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              :label="$t('common.startState')"
              name="status"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :rules="[
                { required: true, message: $t('sysManage.selectEnable') },
              ]"
            >
              <a-radio-group v-model:value="formState.status">
                <a-radio
                  v-for="(item, index) in selectOptions.status"
                  :value="item.value"
                  :key="index"
                  >{{ item.label }}</a-radio
                >
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{
          $t("common.cancel")
        }}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{
          $t("common.ok")
        }}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup name="editDialog">
import { nextTick, ref, onBeforeMount } from "vue";
// import { PlusOutlined } from '@ant-design/icons-vue'
import axios from "@/utils/request";
import { cloneDeep } from "lodash";
import { message } from "ant-design-vue";
import i18n from "@/locales/index";
const { t } = i18n.global;  
 
    // console.log(res)
const emits = defineEmits(['ok'])
const labelCol = { xs: { span: 24 }, sm: { span: 23 } }
const wrapperCol = { xs: { span: 24 }, sm: { span: 23 } }
let title = ref('')
let visible = ref(false)
let isEdit = ref(false)
let confirmLoading = ref(false)
const selectOptions = ref({})
let recordInfo = ref({})
let formState = ref({})
const formRef = ref()
let fileList = ref([])

const edit = async (record, editable) => {
  initModalData(record, editable)
  await nextTick()
  formRef.value.resetFields()
  if (record.id) {
    const res = await axios.getAction('/api/device/hanger-line-bridge/get', { id: record.id })
    if (res.success) {
      let arr1 = [];
      let arr2 = [];
      // 三级联动默认展示
      arr1.push(
        res.data.alineId,
        res.data.amasterTrackId,
        res.data.alineStationId
      );
      arr2.push(
        res.data.blineId,
        res.data.bmasterTrackId,
        res.data.blineStationId
      );
      record.alineStationId = arr1;
      record.blineStationId = arr2;
    }
  }
  //设置桥接默认选中
  if (!record.id) {
    record.bridgeType = 0;
  }
  formState.value = cloneDeep(record)
}
const initModalData = (record, editable) => {
  title.value = t("other.editBridgeSet");
  recordInfo.value = Object.assign({}, record);
  visible.value = true;
  isEdit.value = editable;
};
const queryParams = (value) => {
  const params = cloneDeep(value);
  params.id = recordInfo.value.id;
  // params.productPartNameList = partNameList.value.filter(item => item.name).map(item => item.name)
  return params;
};
const handleOk = async () => {
  try {
    const values = await formRef.value.validateFields();
    //处理就近优先 1==true   0==false
    values.nearestPriority = values.nearestPriority ? 1 : 0;
    // 处理 A点 B点
    if (values.alineStationId.length === 3 && values.blineStationId.length === 3) {
      values.alineId = values.alineStationId[0];
      values.amasterTrackId = values.alineStationId[1];
      values.alineStationId = values.alineStationId[2];

      values.blineId = values.blineStationId[0];
      values.bmasterTrackId = values.blineStationId[1];
      values.blineStationId = values.blineStationId[2];
      confirmLoading.value = true
      const res = await axios.postAction('/api/device/hanger-line-bridge/edit', queryParams(values))
      if (res.success) {
        emits("ok");
        confirmLoading.value = false;
        visible.value = false;
      }
    } else {
      message.error(t("other.existStationNull"));
    }
  } catch (err) {
    console.log("0000000", err);
  }

  confirmLoading.value = false;
};
const handleCancel = () => {
  visible.value = false;
  initModalStatus();
};

const initModalStatus = () => {
  confirmLoading.value = false;
  formState.value = {};
  formRef.value.resetFields();
  fileList.value = [];
};

const initSelectOptions = (obj) => {
  selectOptions.value = obj;
};

onBeforeMount(() => {
  console.log("editDialog");
});
defineExpose({
  edit,
  initSelectOptions,
})
</script>
